<!--评论子组件-->
<template>
    <div>
        <h4>发表评论</h4>
        <textarea placeholder="请输入要吐槽的内容，最多120字" v-model="commentContent"></textarea>

        <mt-button type="primary" size="large" @click="submitComment">发表评论</mt-button>

        <div class="cmt-list">
            <!--key为add_time会报错，如果后台返回一个唯一id可以用那个 -->
            <div class="cmt-item"  v-for="(item,i) in commentList" :key="item.add_time">
                <div class="cmt-title">
                   第{{ i+1 }}楼 用户：{{ item.user_name}}  发表时间：{{ item.add_time | dateFormat}}
                </div>
                <div class="cmt-body">
                    {{ item.content }}
                </div>
            </div>

        </div>

        <mt-button type="default" size="large" plain  @click="addMore">加载评论</mt-button>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";

    export default {
        data(){
            return {
                commentList:[],
                //当前是哪页
                pageIndex : 1,
                //发表的评论
                commentContent:""
            }
        },
        created(){
            this.getCommentsById();
        },
        methods:{
            getCommentsById(){
                this.$http.get("api/getcomments/" + this.parentId + "?pageindex=" + this.pageIndex).then(result => {
                    result = result.body;
                    if(result.status === 0 && result.message.length != 0){
                        //为了在点击加载更多的时候不覆盖内容，所以做个拼接
                        this.commentList = this.commentList.concat(result.message);
                    }else{
                        Toast("已无更多评论");
                    }
                })
            },
            //加载更多
            addMore(){
                this.pageIndex ++ ;
                this.getCommentsById();
            },
            //提交评论
            submitComment(){
                if(!this.commentContent ){
                    Toast("评论内容不能为空");
                    return ;
                }

                //提交评论
                this.$http.post(
                    "api/postcomment/"+this.parentId ,
                    {
                        content:this.commentContent
                    }/*,
                    {
                        emulateJSON:true  //定义表单中的数据格式//移至全局  main.js
                    }*/).then(result => {
                        result = result.body;
                        if(result.status === 0){
                            Toast("发表评论成功");

                            //重新加载一遍评论
                            //先把所有data还原回原来的值
                            this.pageIndex = 1;
                            this.commentList = []
                            this.getCommentsById();
                            this.commentContent = ''
                        }else{
                            Toast("发表评论失败");
                    }
                })
            }
        },
        //获取父组件传递过来的值
        props:['parentId'],
    }
</script>

<style scoped>
    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0;
    }

    .cmt-title {
        font-size:14px;
        line-height: 30px;
        background-color: #ccc;
    }

    .cmt-body {
        font-size:14px;
        line-height: 35px;
        text-indent: 2em;
    }
</style>